<template>
    <div class="icon-page">
        <div class="icon-page-search">
            <span>图标名称：</span>
            <n-input v-model:value="keyWord" class="icon-page-search-input" clearable/>
        </div>
        <TransitionGroup tag="div" class="icon-page-container">
            <div
                class="icon-page-container-item"
                v-for="item in resultList"
                :key="item.font_class"
                @click="onItem(css_prefix_text + item.font_class)"
            >
                <i
                    class="iconfont"
                    :class="css_prefix_text + item.font_class"
                ></i>
                <div>{{ css_prefix_text + item.font_class }}</div>
                <div>{{ item.name }}</div>
            </div>

        </TransitionGroup>
        <n-empty v-if="!resultList.length"/>
    </div>
</template>
<script setup>
import { computed, inject, onMounted, ref } from "vue";

const global = inject("global");

const iconList = ref([]);
const css_prefix_text = ref("");
const keyWord = ref("");

onMounted(() => {
    getIcon();
});

const getIcon = () => {
    fetch("/static/iconfont/iconfont.json")
        .then((res) => res.json())
        .then((res) => {
            css_prefix_text.value = res.css_prefix_text;
            iconList.value = res.glyphs;
        });
};

const resultList = computed(() => {
    return iconList.value.filter((v) => {
        let _class = css_prefix_text.value + v.font_class
        return (
            _class.indexOf(keyWord.value) > -1 ||
            v.name.indexOf(keyWord.value) > -1
        );
    });
});

const onItem = (text) => {
    global.$utils.copyText(text);
};
</script>
<style lang="less" scoped>
.icon-page {
    &-search {
        padding-bottom: 8px;
        display: flex;
        align-items: center;
        span {
            white-space: nowrap;
        }
        &-input {
            width: 240px;
        }
        position: sticky;
        top: 0;
        background: var(--bg-color-1);
        z-index: 101;
    }
    &-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        padding-top: 4px;
        gap: 8px 8px;
        &-item {
            border: 1px solid var(--border-color);
            padding: 8px 12px;
            cursor: pointer;
            transition: all 0.25s ease-in-out;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: var(--border-radius);
            i {
                font-size: 26px;
                color: var(--primary-color);
            }
            div {
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 13px;
            }
            &:hover {
                transform: translateY(-4px);
                background: var(--primary-color-1);
                box-shadow: 2px 2px 8px var(--box-shadow-color);
            }
        }
    }
}
</style>
